<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app" v-cloak>
      <transition-group tag="ul" appear name="list"@before-appear="beforeAppear"@after-appear="afterAppear">
        <li class="list" v-for="(item,index) in list" :key="item.id":data-index="index">
          {{item.id}}--{{item.name}}--{{item.age}}
          <button @click="del(index)">删除</button>
      </li>
     </transition-group>
     <input type="text" v-model="id" />
          <input type="text" v-model="name" />
          <input type="text" v-model="age" />
          <input type="button" value="添加人员" @click="add" />
    </div>
  </body>
  <script src="vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        id: "",
        name: "",
        age: "",
        list: [{
          id: 1,
          name: '小王',
          age: 18
        }, {
          id: 2,
          name: '小刚',
          age: 19
        }, {
          id: 3,
          name: '小刘',
          age: 21
        }]
      },
      methods: {
        add() {
          let obj = {
            id: this.id,
            name: this.name,
            age: this.age
          }
          this.list.push(obj);
          this.id = this.name = this.age = "";
        }
      }
    })
  </script>
  <style>
    .v-enter,
    .v-enter-to {
      opacity: 0;
      transform: translateY(100px);
    }

    .v-enter-active,
    .v-leave-active {
      transition: all 0.5s;
    }
  </style>
</html>
